<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view></view>
				<view class="title">联系人</view>
				<view @click="jumpAddFirend">
					<image src="../../static/img/contact-01.png" class="add-icon"></image>
				</view>
			</view>
		</view>

		<view class="main" :style="{ height: mianHeight + 'px'}">
			<view class="search">
				<image src="../../static/img/search.png"></image>
				<input type="text" placeholder="搜索" confirm-type="search" @confirm="handleSearch">

				<!-- <text @click="cancle">取消</text> -->
			</view>
			
			<!-- <view class="container">
			  <view class="index-box" @touchstart="touchStart" @touchmove="touchMove">
			    <view v-for="(item, i) in indexList" :key="i" @click="toSelectIndex(item)">{{ item }}</view>
			  </view>
			  <scroll-view :style="{ height:   '300rpx' }" scroll-y :scroll-into-view="toView" scroll-with-animation>
			    <view class="m-t-25" v-for="(info, i) in contactsList" :key="i" :id="info.title">
			      <view class="sub-tit-tip">{{ info.title }}</view>
			      <view class="cont-box" v-for="(item, j) of info.contacts" :key="item.id">
			        <view class="tit-tip">{{ item.nickName }}</view>
			      </view>
			    </view>
			  </scroll-view>
			</view> -->

			<view class="friend-list">
				<!-- <view class="firend-use" @click="jumpAddFirend">
					<image src="../../static/img/contact-02.png"></image>
					<view>
						添加好友
					</view>
				</view> -->
				<view class="firend-use" @click="jumpApply">
					<image src="../../static/img/contact-02.png"></image>
					<view>
						新的朋友
						<!-- <text class="new-num">1</text> -->
					</view>
				</view>
				<!-- @click="jumpGroupList" -->
				<view class="firend-use" @click="jumpGroupList">
					<image src="../../static/img/contact-03.png"></image>
					<view>群聊</view>
				</view>

				<view class="friend-scroll">
				  <view class="index-box" @touchstart="touchStart" @touchmove="touchMove">
					<view v-for="(item, i) in indexList" :key="i" @click="toSelectIndex(item)">{{i==(indexList.length-1)&&item=='xyz' ? '#' :item}}</view>
				  </view>
					<scroll-view :style="{ height:scrollHeight+'rpx' }" scroll-y="true" :scroll-into-view="toView" scroll-with-animation class="scroll-Y">
						<view class="m-t-25" v-for="(info, i) in contactsList" :key="i" :id="info.title">
						  <view class="sub-tit-tip">{{ info.text }}</view>
							<view class="scroll-view-item" v-for="(item,index) in info.contacts" :key="i" :id="item.title" @click="jumpUserInfo(item.id)">
								<image :src="item.headImage"></image>
								<view class="user-name">
									{{ item.noteName }}
								</view>
							</view>
							</view>
					</scroll-view>
				</view>

				<view class="floot" v-if="firendList.length">
					{{ firendList.length }}位联系人
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	import { friendListApi } from '@/api/api.js'
	export default {
		data() {
			return {
				firendList: [],
				mianHeight: '',
				contacts: [/* 联系人数据 */],
				sortedContacts: [] ,// 经过排序后的联系人数据
				contactsList: '',
				indexList:[],
				pageHeight:'',
				toView: 'Y',
				letterDomRes: {},
				scrollHeight: '',
			}
		},
		mixins: [navBarMixin],
		methods: {
			 toSelectIndex(e) {
				 console.log(e);
			   // 选择目标索引
			   this.toView = e;
			   // uni.showToast({ title: e, icon: "none", duration: 1000 });
			 },
			 touchStart() {
			   // 获取索引条高度
			   this.$nextTick(() => {
			     uni.createSelectorQuery().in(this).selectAll(".index-box").boundingClientRect(data => {
			         this.letterDomRes = data[0];
			       }).exec();
			   });
			 },
			 touchMove(e) {
			   // 触摸移动事件
			   const y = e.touches[0].pageY;
			   const itemLen = this.contactsList.length;
			   const height = this.letterDomRes.height;
			   const top = this.letterDomRes.top;
			   // 滑动的偏移量（偏差值）
			   const offsetTop = height + top - y;
			   const itemHeight = height / itemLen;
			   const index = itemLen - ((offsetTop / itemHeight) | 0) - 1;
			   if (index < 0 || index >= itemLen) return;
			   const letter = this.contactsList[index].initial;
			   // if (this.toView == letter) return; // [优化] 过滤相同的
			   this.toSelectIndex(letter);
			 },
			async getFriendList() {
				const res = await friendListApi()

				if (!res.code) {
					this.firendList = res.data
					
					let info = res.data
					let list = []
					for (var i = 0; i < info.length; i++) {
						if(info[i].pinyin=='#') {
							console.log(list.findIndex(v => v.title == 'xyz'));
							if(list.findIndex(v => v.title == 'xyz')!=-1) {
								// var num
								// if(info[i].pinyin=='#') {
								// 	console.log('排序#');
								// 	num = list.findIndex(v => v.title == 'xyz')
								// }else {
									var num = list.findIndex(v => v.title == 'xyz')
									console.log(list[num]);
									list[num].contacts.push(info[i])
								// }
							}else{
								list.push({'title':'xyz','text':info[i].pinyin,'contacts':[info[i]]})
								console.log('第一#',list);
							}
						}else{
							if(list.some(item => item.title==info[i].pinyin )) {
								var num = list.findIndex(v => v.title == info[i].pinyin)
								list[num].contacts.push(info[i])
							}else{
								
							list.push({'title':info[i].pinyin,'text':info[i].pinyin,'contacts':[info[i]]})
							}
						}
						
						
						// if(list.some(item => item.title==info[i].pinyin )) {
						// 	// var num
						// 	// if(info[i].pinyin=='#') {
						// 	// 	console.log('排序#');
						// 	// 	num = list.findIndex(v => v.title == 'xyz')
						// 	// }else {
						// 	// 	num = list.findIndex(v => v.title == info[i].pinyin)
						// 	// }
						// 	var num = list.findIndex(v => v.title == info[i].pinyin)
						// 	console.log('有',num);
						// 	list[num].contacts.push(info[i])
						// }else {
						// 	console.log('无');
						// 	if(info[i].pinyin=='#') {
						// 		console.log('无#');
						// 		list.push({'title':'xyz','text':info[i].pinyin,'contacts':[info[i]]})
						// 	}else {
						// 		list.push({'title':info[i].pinyin,'text':info[i].pinyin,'contacts':[info[i]]})
						// 	}
						// }
					}
					this.contactsList = list
					this.contactsList.forEach(item => this.indexList.push(item.title))
					console.log(list);
				}
			},

			jumpAddFirend() {
				uni.navigateTo({
					url: '/pages/friend/friend-add'
				})
			},
			
			jumpApply() {
				uni.navigateTo({
					url: '/pages/chat/applyList'
				})
			},
			
			jumpGroupList() {
				uni.navigateTo({
					url: '/pages/group/group-list'
				})
			},

			jumpUserInfo(id) {
				uni.navigateTo({
					// url: '/pages/chat/room?data=' + id
					url: '/pages/common/user-info?id=' + id
				})
			},
		},
		onShow() {
			this.contactsList=[]
			this.indexList=[]
			this.getFriendList()
			uni.hideTabBarRedDot({
				index: 1
			})
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			const statusBarHeight = systemInfo.statusBarHeight
			console.log(systemInfo);
			const navigationBarHeight = systemInfo.platform === 'android' ? 44 : 44 // 根据不同平台设置导航栏高度 
			const totalHeight = statusBarHeight + navigationBarHeight
			this.scrollHeight = (systemInfo.screenHeight - totalHeight) 
			// this.scrollHeight = uni.upx2px(systemInfo.screenHeight - totalHeight)
			let rpxValue = uni.upx2px(100);
			console.log(rpxValue); // 输出的值为转换后的 rpx
			uni.setStorageSync('scrollHeight', (systemInfo.screenHeight - totalHeight) + 'px')
			
			uni.createSelectorQuery().in(this).select(".top-box").boundingClientRect(({ height }) => {
			    this.pageHeight = uni.getSystemInfoSync().windowHeight - height - 20;
			  }).exec();
			  
			uni.$on('applyFriend',(data) => {
				console.log('data====',data)
			})
			
			// const systemInfo = uni.getSystemInfoSync()
			this.mianHeight = systemInfo.screenHeight - 108 - systemInfo.statusBarHeight
			// console.log('this.mianHeight===', this.mianHeight)

		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.wf-box {
		overflow: hidden;

		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.add-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.main {
			// margin-top: 30rpx;
			padding: 30rpx 30rpx;
			// height: calc(100vh - 96rpx - 60px);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;


			.search {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				height: 76rpx;
				background: #fff;
				border-radius: 40rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					margin-left: 20rpx;
				}

				text {
					padding: 0 18rpx;
					color: #666;
				}
			}

			.friend-list {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				padding: 0 30rpx;
				// padding-bottom: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
				overflow: auto;

				.firend-use {
					height: 114rpx;
					display: flex;
					align-items: center;

					image {
						margin-right: 20rpx;
						width: 64rpx;
						height: 64rpx;
					}

					view {
						flex: 1;
						height: 100%;
						line-height: 114rpx;
						border-bottom: 2rpx solid #eee;
					}
					
					.firend-f-sb {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.new-num {
							display: block;
							width: 50rpx;
							height: 50rpx;
							background: #3f93ff;
							border-radius: 50%;
							text-align: center;
							line-height: 50rpx;
							color: #fff;
						}
					}
				}

				.friend-scroll {
					flex: 1;
					// height: 800rpx;
					// height: 570rpx;
					overflow: auto;
					
					.index-box {
						position: fixed;
						right: 20rpx;
						font-size: 24rpx;
						view {
							line-height: 40rpx;
						}
					}

					.scroll-Y {
						height: 100%;
						overflow-y: auto;
					}

					.scroll-view-item {
						display: flex;
						height: 114rpx;
						display: flex;
						align-items: center;

						image {
							margin-right: 20rpx;
							width: 64rpx;
							height: 64rpx;
						}

						view {
							flex: 1;
							height: 100%;
							line-height: 114rpx;
							border-bottom: 2rpx solid #eee;
						}
					}
				}

				.floot {
					margin-top: 20rpx;
					margin-bottom: 20rpx;

					color: #999;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}
	.container {
	  display: flex;
	}
	
	.contact-list {
	  flex: 1;
	}
	
	.group-title {
	  font-weight: bold;
	}
	
	.index-list {
	  width: 20px;
	  padding: 10px 5px;
	}
	
	.index-item {
	  text-align: center;
	  cursor: pointer;
	}
	.sub-tit-tip {
		height: 40rpx;
		line-height: 40rpx;
		background-color: #F1F1F1;
		color: #666;
		font-size: 24rpx;
		padding-left: 14rpx;
	}
</style>